<template>
    <div>
     <br>
     <Row :gutter="8"> 
        
        <Col v-for="item in buttons" style="float:left;" >
                   <Button @click="handlebuttonclick" type="primary">{{item.name}}</Button>
                 </Col>
     </Row>
     <br>
     <Row v-if="id"  >
         <Col span="24">
            <Table :columns="columns" :data="transformNodetitle"></Table>
        </Col>
     </Row>
     <Row v-if="id">
        <Col span="2" >
        <br>
                 <h2 >结点描述</h2>
        </Col>
        <Col span="22">
        <br>
                 <Input v-model="nodeinfo.description" type="textarea" :autosize="true" placeholder="请输入详细描述信息,用于知识库描述" />     
         </Col>
    </Row>
    <Row v-if="id">
       <Col span="24" >   
       <br>       
        <Button  type="success" long @click="handleclick">提交修改</Button>
       </Col>
    </Row>
    
    </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
    buttons: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      nodeinfo: {},
      id: "",
      nodedesc: "测试",
      columns: []
    };
  },
  computed: {
    isnotempty: function() {
      console.log(!this.nodeinfo.keys);
      return !this.nodeinfo.keys;
    },
    transformNodetitle: function() {
      //定义属性中英文对字典
      var keyMap = {
        dbserviceid: "数据库实例ID",
        dbname: "数据库服务名",
        port: "数据库端口号",
        ip: "IP地址",
        name: "对象名称",
        type: "对象类型",
        datastoreid: "数据源内部ID",
        directory: "目录(用于文件类型)",
        sid: "数据库实例名",
        username: "数据库模式名",
        jobid: "作业ID",
        pipeid: "管道ID",
        orderid: "排序号",
        pipe_source: "管道数据源ID",
        pipe_desc: "管道目标ID",
        parent_job_id: "父作业ID",
        owner: "表的所有者",
        tablename: "表名",
        nodeid: "结点ID"
      };
      function toChsKeys(data, keyMap) {
        return Object.keys(data).reduce((newData, key) => {
          let newKey = keyMap[key] || key;
          newData[newKey] = data[key];
          return newData;
        }, {});
      }
      var datalist = [];
      this.columns = [];
      var newnodeinfo = toChsKeys(this.nodeinfo, keyMap);
      // console.log(newnodeinfo);
      delete newnodeinfo["description"];
      for (let i in newnodeinfo) {
        this.columns.push({
          key: i,
          title: i
        });
      }
      datalist.push(newnodeinfo);
      console.log(datalist);

      return datalist;
    }
  },
  methods: {
    handleclick() {
      // console.log(this.nodeinfo.description);

      this.$http
        .post("http://127.0.0.1:5000/operation/update", {
          id: this.id,
          description: this.nodeinfo.description
        })
        .then(
          response => {
            alert("update succeeded");
          },
          response => {
            alert("error when update is trying");
          }
        );
    },
    handlebuttonclick(e) {
      // 如果要求展示相关的关联表结点,则根据管道ID查询其读写的表
      if (e.target.innerHTML === "展示该管道关联表结点") {
        this.$emit("getmoreref", {
          flag: "p",
          nodeid: this.data.id,
          othernodelabel: "dbtables"
        });
      } else if (e.target.innerHTML === "展示该管道前后的管道") {
        this.$emit("getmoreref", {
          flag: "p",
          nodeid: this.data.id,
          othernodelabel: "pipes"
        });
      } else if (e.target.innerHTML === "展示该管道所属的作业") {
        this.$emit("getmoreref", {
          flag: "p",
          nodeid: this.data.id,
          othernodelabel: "jobs"
        });
      }
      // 返回相关的结点和关系的接口,获取这个信息之后,需要向父组件抛出事件以及返回结果,获父组件更新network中的结点的信息,刷新
      // else if (e.target.innerHTML === "查询该表关联的其它管道") {
      //   this.$emit('getmoreref',{flag:'p',nodeid:this.data.id,othernodelabel:'jobs'});
      // }
    }
  },
  watch: {
    // 父组件发生变动时，当前该组件需要进行更新
    data: function() {
      this.id = this.data.id;
      this.nodeinfo = this.data.properties ? this.data.properties : {};
      this.nodeinfo.description = this.data.properties
        ? this.data.properties.description
          ? this.data.properties.description
          : ""
        : "";
      console.log(this.id);
    }
  },
  mounted() {
    // 父组件的ID由2部分组件，一部分是选中的结点id和label名称,一部分是选中结点的属性对象
    this.id = "" || this.data.id;
    this.nodeinfo = {} || this.data.properties;
    this.nodeinfo.description = "";
    // console.log("结点初始化时结点信息为" + this.nodeinfo);
  }
};
</script>